<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import DateRange from "@/components/DateRange/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";
import { formatDate } from "@/utils";

const { pageData, agrMap } = useData();
import {
  deleteDataByIp,
  deleteDataByMac,
  getDataByPageByIp,
  getDataByPageByMac
} from "@/api/modules/control-strategy/white-list";
import UpdateForm from "./components/UpdateForm/index.vue";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {
    type: 2
  },
  responseKey: {
    list: "result.data",
    total: "result.total"
  }
});

function loadDataCb() {
  loadData({
    api: formData.type == 1 ? getDataByPageByMac : getDataByPageByIp,
    sendData:
      formData.type == 1
        ? {
            pageNum: formData.pageNum - 1,
            pageSize: formData.pageSize,
            mac: formData.mac,
            startTime: formData.startTime ? parseInt(new Date(formData.startTime).getTime() / 1000) : "",
            endTime: formData.endTime ? parseInt(new Date(formData.endTime).getTime() / 1000) : ""
          }
        : {
            pageNum: formData.pageNum - 1,
            pageSize: formData.pageSize,
            ip: formData.ip,
            startTime: formData.startTime ? parseInt(new Date(formData.startTime).getTime() / 1000) : "",
            endTime: formData.endTime ? parseInt(new Date(formData.endTime).getTime() / 1000) : ""
          }
  });
}

loadDataCb();

function reloadDataCb() {
  reloadData();
  loadData({
    api: formData.type == 1 ? getDataByPageByMac : getDataByPageByIp,
    sendData:
      formData.type == 1
        ? {
            pageNum: formData.pageNum - 1,
            pageSize: formData.pageSize,
            mac: formData.mac,
            startTime: formData.startTime ? parseInt(new Date(formData.startTime).getTime() / 1000) : "",
            endTime: formData.endTime ? parseInt(new Date(formData.endTime).getTime() / 1000) : ""
          }
        : {
            pageNum: formData.pageNum - 1,
            pageSize: formData.pageSize,
            ip: formData.ip,
            startTime: formData.startTime ? parseInt(new Date(formData.startTime).getTime() / 1000) : "",
            endTime: formData.endTime ? parseInt(new Date(formData.endTime).getTime() / 1000) : ""
          }
  });
}

loadDataCb();

/**删除*/
import useDelete from "@/hooks/useDelete";
import { computed } from "vue";
import BaseCollapse from "@/components/BaseCollapse/index.vue";

const { deleteHandler, idList } = useDelete();

async function deleteCb(id) {
  await deleteHandler({
    api: formData.type == 1 ? deleteDataByMac : deleteDataByIp,
    multiple: false,
    sendData: {
      id: [id]
    },
    hideMessageBox: false
  });
  loadDataCb();
}

function selectCb(data) {
  console.log(data);
  idList.value = data.rowList.map(item => item.userId);
}

function typeChange(type) {
  reloadData();
  formData.type = type;
  loadDataCb();
}
</script>

<template>
  <BaseUpDown>
    <template #up>
      <BaseCollapse title="白名单">
        <template #header>
          <div class="h-box justify-end" style="height: 55px; float: right; width: 200px" @click.stop>
            <UpdateForm
              :type="formData.type"
              :title="formData.type == 1 ? `新增MAC白名单` : `新增IP白名单`"
              @success="loadDataCb()"
            >
              <BaseButton type="add_icon_text" />
            </UpdateForm>
            <BaseButton @click="loadDataCb()" type="refresh_icon_text" />
          </div>
        </template>
        <el-form>
          <div class="h-box" style="flex-wrap: wrap">
            <el-form-item label="类型">
              <el-select @change="typeChange" v-model="formData.type" placeholder="请选择" style="width: 120px">
                <el-option :value="2" label="IP"></el-option>
                <el-option :value="1" label="MAC"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="formData.type == 1" class="mg-l-sm" label="MAC">
              <el-input v-model="formData.mac" placeholder="请输入关键字" style="width: 140px" />
            </el-form-item>
            <el-form-item v-if="formData.type == 2" class="mg-l-sm" label="IP">
              <el-input v-model="formData.ip" placeholder="请输入" style="width: 140px" />
            </el-form-item>
            <el-form-item class="mg-l-sm" label="时间">
              <DateRange v-model:start="formData.startTime" v-model:end="formData.endTime" />
            </el-form-item>
            <BaseButton class="mg-l-sm" style="margin-bottom: 18px" @click="loadDataCb()" type="search_icon_text" />
            <BaseButton class="mg-l-sm" style="margin-bottom: 18px" @click="reloadDataCb()" type="reset_icon_text" />
          </div>
        </el-form>
      </BaseCollapse>
    </template>
    <he-table
      @handle-current-change="loadDataCb"
      :total="tableData.total"
      v-model:page-size="formData.pageSize"
      v-model:page-num="formData.pageNum"
      operate-width="180px"
      :operate-list="[]"
      :table-data="tableData.list"
      :column-data="pageData.columnData"
      :show-multiple="false"
      :show-summary="false"
      :show-operate="false"
      :show-multiple-column="false"
      :show-pagination="true"
      @select="selectCb"
    >
      <template #2Header="{ data }">
        {{ formData.type == 1 ? "MAC" : "IP" }}
      </template>
      <template #6Default="{ data }">
        {{ formData.type == 1 ? data.row[5] : data.row[6] }}
      </template>
      <template #operationDefault="{ data }">
        <UpdateForm
          :type="formData.type"
          :row-data="{
            id: data.row[data.row.length - 1].replace('/', ''),
            ip: formData.type == 2 ? data.row[2] : undefined,
            mac: formData.type == 1 ? data.row[2] : undefined,
            name: data.row[1]
          }"
          :title="`编辑`"
          @success="loadDataCb"
        >
          <base-button type="edit_text"></base-button>
        </UpdateForm>
        <base-button @click="deleteCb(data.row[data.row.length - 1].replace('/', ''))" type="del_text"></base-button>
      </template>
    </he-table>
  </BaseUpDown>
</template>
